<template>
  <div>
    <div class="frame-header">
      <span>通讯信息</span>
    </div>
    <div class="operates">
      <el-form
        :model="form"
        class="myform"
        status-icon
        :rules="rules"
        ref="myform"
      >
        <el-form-item prop="phone">
          <el-input
            class="input"
            type="text"
            placeholder="用户名、手机号"
            v-model="form.phone"
          >
          </el-input>
        </el-form-item>
        <el-button plain class="btn delete pramary">搜索</el-button>
        <el-button plain class="btn delete pramary">筛选</el-button>
      </el-form>

      <div class="right-btns">
        <el-button plain class="btn delete pramary">增加</el-button>
        <el-button plain class="btn delete pramary">编辑</el-button>
        <el-button plain class="btn delete pramary">审核</el-button>
        <el-button plain class="btn delete pramary">删除</el-button>
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="" label="头像" width="50" />
      <el-table-column label="用户名" width="130">
        <template #default="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column property="phone" label="手机号" width="130" />
      <el-table-column property="address" label="状态" width="80" />
      <el-table-column property="cout" label="省市区" width="160" />
      <el-table-column property="points" label="街道地址" width="150" />
      <el-table-column property="recently" label="邮编" width="80" />
      <el-table-column property="contact" label="联系人" width="80" />
      <el-table-column property="phone" label="联系手机" width="130" />
      <el-table-column property="eml" label="邮箱" width="190" />
    </el-table>
  </div>
</template>


<script>
import { ref, toRefs, reactive, watch, onUnmounted, onMounted } from "vue";
var timer = null;
export default {
  name: "listofusers",
  setup() {
    const myform = ref();
    const state = reactive({
      form: {},
      tableData: [
        {
          name: "张三",
          phone: "13720326619",
          address: "待审核",
          cout: "广东省-广州市-番禺区",
          points: "珠江大道1号1603",
          recently: 500600,
          contact: "张三丰",
          phone: "15975369852",
          eml: "1298055964@qq.com",
        },
        {
          name: "李四",
          phone: "13579841365",
          address: "待审核",
          cout: "广东省-广州市-番禺区",
          points: "珠江大道1号1603",
          recently: 500600,
          contact: "张三丰",
          phone: "15975369852",
          eml: "1298055964@qq.com",
        },
      ],
    });

    return {
      myform,
      ...toRefs(state),
    };
  },
};
</script>



<style lang="scss" scoped>
.qqq {
  width: 192px;
  display: flex;
}
.frame-header {
  padding: 0 27px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #feb900;
  font-weight: 700;
  span {
    display: inline-block;
    padding-right: 50px;
  }
}
.operates {
  margin: 18px 0;
  padding: 0 27px 0 0;

  .myform {
    display: flex;
    float: left;
    padding-left: 30px;
    width: 500px;
    margin-right: -500px;
    position: relative;
    z-index: 10;
    .input {
      height: 35px;
      padding: 0;
      margin: 0;
      font-size: 16px;
      outline: none;
      width: 192px;
    }
    .pramary {
      width: 70px;
      height: 38px;
      min-width: 70px;
      margin-left: 10px;
    }
  }
}
.right-btns {
  float: left;
  padding-left: 470px;
  width: 100%;
  text-align: right;
}
.lastitem {
  ::v-deep .el-form-item__content {
    line-height: 1;
  }
}
</style>